<script lang="ts">
  import { A, Button } from "flowbite-svelte";
  import { DribbbleSolid, FacebookSolid, GithubSolid, TwitterSolid } from "flowbite-svelte-icons";
  import { CardWidget } from "flowbite-svelte-admin-dashboard";

  const items = [
    { icon: FacebookSolid, name: "Facebook account", link: "www.facebook.com/themesberg" },
    { icon: TwitterSolid, name: "Twitter account", link: "www.twitter.com/themesberg" },
    { icon: GithubSolid, name: "Github account", link: "" },
    { icon: DribbbleSolid, name: "Dribble account", link: "" }
  ];
</script>

<CardWidget title="Social accounts" class="p-4 sm:p-6">
  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
    {#each items as { icon, name, link }}
      <li class="py-4">
        <div class="flex items-center space-x-4">
          <div class="flex-shrink-0">
            <svelte:component this={icon} size="lg" class="text-gray-900 dark:text-white" />
          </div>
          <div class="min-w-0 flex-1">
            <p class="truncate text-base font-semibold text-gray-900 dark:text-white">
              {name}
            </p>
            <p class="truncate text-sm font-normal text-gray-500 dark:text-gray-300">
              {#if link}
                <A href="">{link}</A>
              {:else}
                Not connected
              {/if}
            </p>
          </div>
          <div class="inline-flex items-center">
            {#if link}
              <Button class="px-3 py-2" color="alternative">Disconnect</Button>
            {:else}
              <Button class="px-3 py-2">Connect</Button>
            {/if}
          </div>
        </div>
      </li>
    {/each}
  </ul>
  <Button class="mt-2 w-fit">Save all</Button>
</CardWidget>
